<template>
  <div id="box">
    <el-container>
      <el-main style="margin-left:-12px;font-weight: bolder;">{{id? '编辑英雄':'新建英雄'}}</el-main>
    </el-container>
    <!-- native指向原生表单  -->
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-tabs type="border-card" value="skills">
        <el-tab-pane label="基础信息" style=" color: #606266;" name="skills">
          <el-row type="flex">
            <el-col :md="10">
              <el-form-item label="英雄称号">
                <el-input
                  style="width: 280px;"
                  v-model="model.name"
                  prefix-icon="el-icon-user"
                  error
                  required
                  clearable
                  maxlength="20"
                  placeholder="name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="10">
              <el-form-item label="英雄称号">
                <el-input
                  style="width: 280px;"
                  v-model="model.title"
                  prefix-icon="el-icon-star-off"
                  error
                  required
                  clearable
                  maxlength="20"
                  placeholder="title"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :md="10">
              <el-form-item label="英雄头像">
                <el-upload
                  class="avatar-uploader"
                  required
                  :action="uploadUrl"
                  :headers="getAuthHeaders()"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="afterUpload"
                >
                  <img v-if="model.avatar" :src="model.avatar" class="avatar" />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :md="10">
              <el-form-item label="宣传图片">
                <el-upload
                  class="avatar-uploader"
                  required
                  :action="uploadUrl"
                  :headers="getAuthHeaders()"
                  :show-file-list="false"
                  :on-success="res => $set(model,'banner',res.url)"
                >
                  <img v-if="model.banner" :src="model.banner" class="avatar-url" />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="英雄类型">
            <el-select filterable  style="width: 280px;" v-model="model.categories" multiple>
              <el-option
                v-for="item of categories"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-row type="flex">
            <el-col :md="10">
              <el-form-item label="难度" class="demonstration">
                <el-rate
                  :max="9"
                  show-score
                  style="width: 280px;"
                  v-model="model.scores.difficult"
                  error
                  required
                  clearable
                  maxlength="20"
                ></el-rate>
              </el-form-item>
            </el-col>
            <el-col :md="10">
              <el-form-item label="技能" class="demonstration">
                <el-rate
                  :max="9"
                  show-score
                  style="width: 280px;"
                  v-model="model.scores.skills"
                  error
                  required
                  clearable
                  maxlength="20"
                ></el-rate>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :md="10">
              <el-form-item label="攻击" class="demonstration">
                <el-rate
                  :max="9"
                  show-score
                  style="width: 280px;"
                  v-model="model.scores.attack"
                  error
                  required
                  clearable
                  maxlength="20"
                ></el-rate>
              </el-form-item>
            </el-col>
            <el-col :md="10">
              <el-form-item label="生存" class="demonstration">
                <el-rate
                  :max="9"
                  show-score
                  style="width: 280px;"
                  v-model="model.scores.survive"
                  error
                  required
                  clearable
                  maxlength="20"
                ></el-rate>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="顺风出装">
            <el-select filterable v-model="model.items1" multiple style="width: 500px;">
              <el-option v-for="item of items" :key="item._id" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="逆风出装">
            <el-select filterable v-model="model.items2" multiple style="width: 500px;">
              <el-option v-for="item of items" :key="item.id" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="使用技巧">
            <el-input style="width: 800px;" rows="3" v-model="model.usageTips" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="对抗技巧">
            <el-input style="width: 800px;" rows="3" v-model="model.battleTips" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="团战思路">
            <el-input style="width: 800px;" rows="3" v-model="model.teamTips" type="textarea"></el-input>
          </el-form-item>
        </el-tab-pane>

        <!-- end page one -->

        <el-tab-pane label="技能">
          <el-row type="flex" style="flex-wrap: wrap">
            <el-col :md="11" v-for="(item,i) in model.skills" :key="i">
              <el-form-item>
                <el-tag
                  style="text-align: center;border-radius:5px;width: 100%; height: 40px;line-height:40px "
                  type="success"
                >第{{i+1}}个技能描述</el-tag>
              </el-form-item>

              <el-form-item label="技能名称">
                <el-input prefix-icon="el-icon-s-help" v-model="item.name" required></el-input>
              </el-form-item>

              <el-form-item label="技能图标">
                <el-upload
                  class="avatar-uploader"
                  :action="$http.defaults.baseURL+'/upload'"
                  :show-file-list="false"
                  :on-success="response =>$set(item,'icon',response.url)"
                >
                  <img v-if="model.avatar" :src="item.icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="冷却值" class="demonstration">
                    <el-input v-model="item.delay"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="消耗" class="demonstration">
                    <el-input v-model="item.cost" required></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="技能描述">
                <el-input rows="3" v-model="item.description" type="textarea"></el-input>
              </el-form-item>

              <el-form-item label="小提示">
                <el-input rows="3" v-model="item.tips" type="textarea"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="danger" style="width:100%" @click="model.skills.splice(i,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-button id="addskills" @click="model.skills.push({})">
            <i class="el-icon-plus"></i>
            添加技能
          </el-button>
        </el-tab-pane>

        <!-- end page two -->
        <el-tab-pane label="最佳搭档">
          <el-row type="flex" style="flex-wrap: wrap">
            <el-col :md="11" v-for="(item,i) in model.partners" :key="i">
              <el-form-item>
                <el-tag
                  style="text-align: center;border-radius:5px;width: 100%; height: 40px;line-height:40px "
                  type="success"
                >第{{i+1}}个搭档英雄</el-tag>
              </el-form-item>

              <el-form-item label="英雄名称">
                <el-select filterable prefix-icon="el-icon-s-help" v-model="item.hero" required>
                  <el-option 
                    v-for='hero in heroes'
                    :key="hero._id"
                    :value="hero._id" 
                    :label="hero.name"
                  >

                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="配合描述">
                <el-input rows="3" v-model="item.description" type="textarea"></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="danger" style="width:100%" @click="model.partners.splice(i,1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-button id="addskills" @click="model.partners.push({})">
            <i class="el-icon-plus"></i>
            添加英雄
          </el-button>
        </el-tab-pane>
      </el-tabs>
      <el-form-item></el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" native-type="submit" plain>保存</el-button>
        <el-button
          type="danger"
          size="medium"
          native-type="button"
          @click="cancel"
          v-show="this.id"
          :plain="true"
        >取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    id: {}
  },
  data() {
    return {
      categories: [],
      items: [],
      model: {
        name: "",
        avatar: "",
        scores: {
          difficut: 0
        },
        heroes: [],
        skills: [],
        partners: []
      }
    };
  },
  methods: {
    async save() {
      //实现新增的保存和编辑的保存
      if (this.id) {
        const response = await this.$http.put(
          `rest/heroes/${this.id}`,
          this.model
        );
      } else {
        const response = await this.$http.post("rest/heroes", this.model);
      }

      this.$router.push("/heroes/list");
      this.$message({
        type: "success",
        message: "保存成功",
        duration: 2000
      });
    },
    async fetch() {
      const response = await this.$http.get(`rest/heroes/${this.id}`);
      // this.model = response.data;
      //添加未重复的，有重复就直接赋值
      this.model = Object.assign({}, this.model, response.data);
    },
    //初始化获取下拉列表的父分类
    async fetchCategories() {
      const response = await this.$http.get(`rest/categories`);
      this.categories = response.data;
    },
    //初始化获取下拉列表的出装
    async fetchItems() {
      const response = await this.$http.get(`rest/items`);
      this.items = response.data;
    },
    //初始化获取英雄选择
    async fetchHeroes() {
      const response = await this.$http.get(`rest/heroes`);
      this.heroes = response.data;
    },
    //取消保存返回上一页
    cancel() {
      this.$router.go(-1);
    },
    //上传文件自动赋值名称
    beforeAvatarUpload(file) {
      let isLt2M = file.size / 1024 / 1024 < 2;

      //自动填充文本框
      let imageName = file.name;
      this.model.name = imageName.split(".")[0];

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    //图片保存成功返回操作
    afterUpload(response) {
      this.$message({
        type: "success",
        message: "上传成功",
        duration: 2000
      });

      this.model.avatar = response.url;
      // this.$set(this.model, 'avatar', response.url)
    }
  },
  created() {
    this.fetchHeroes();
    this.id && this.fetch();
    this.fetchCategories();
    this.fetchItems();
  }
};
</script>

<style scope>
.el-main {
  overflow: visible !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 5rem;
  height: 5rem;
  line-height: 5rem !important;
  text-align: center;
}
.el-icon-plus:before {
  top: 50%;
}
/* 星等级位置调整 */
.el-rate {
  line-height: 2.5 !important;
}
/* 提示文字的样式 */
.el-rate__text {
  color: #606266;
  font-size: 16px !important;
  vertical-align: middle;
  margin-left: 10px;
}
.avatar {
  width: 5rem;
  height: 5rem;
  display: block;
}
.avatar-url {
  max-width: auto;
  min-width: 5rem;
  height: 5rem;
  display: block;
}
.el-button--medium {
  padding: 15px 60px !important;
}
/* 添加技能 */
#addskills {
  width: 50%;
  display: block;
  margin: auto;
}
.avatar-uploader .el-upload {
  padding: 5px !important;
}
</style>